<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数据库编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/css/layui.css" />
    <link rel="stylesheet" href="/static/css/common.css" />

</head>

<body>
    <form class="layui-form" action="" lay-filter="editform">
        <div class="mainBox">
            <div class="main-container">
                <div class="main-container">
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据库名</label>
                        <div class="layui-input-block">
                            <input type="text" name="database" lay-verify="required|len" autocomplete="off" min="1"
                                placeholder="请输入数据库名" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="user" value="root" autocomplete="off" placeholder="请输入用户名"
                                class="layui-input" lay-verify="required|len" min="2">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="password" autocomplete="off" placeholder="请输入密码"
                                class="layui-input" lay-verify="required|len" min="2">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="host" autocomplete="off" placeholder="请输入地址" class="layui-input"
                                lay-verify="required|len" min="2" value="127.0.0.1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">端口</label>
                        <div class="layui-input-block">
                            <input type="number" name="port" value="3306" lay-verify="required" autocomplete="off"
                                placeholder="请输入端口" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">前缀</label>
                        <div class="layui-input-block">
                            <input type="text" name="prefix" autocomplete="off" placeholder="请输入前缀" class="layui-input"
                                value="rt_">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="encoding" autocomplete="off" placeholder="请输入编码"
                                class="layui-input" value="utf8">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">ssh连接</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="ssh" lay-skin="switch" lay-filter="ssh">
                        </div>
                    </div>
                    <div id="ssh-area" style="display:none">
                        <div class="layui-form-item">
                            <label class="layui-form-label">ssh地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="shost" autocomplete="off" placeholder="请输入地址"
                                    class="layui-input" value="127.0.0.1">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">ssh端口</label>
                            <div class="layui-input-block">
                                <input type="number" name="sport" value="22" autocomplete="off" placeholder="请输入端口"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">ssh用户名</label>
                            <div class="layui-input-block">
                                <input type="text" value="root" name="suser" autocomplete="off" placeholder="请输入远程登录用户名"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">验证方式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="stype" lay-filter="sshtype" value="1" title="密码" checked>
                                <input type="radio" name="stype" lay-filter="sshtype" value="2" title="密钥">
                            </div>
                        </div>
                        <div class="layui-form-item" id="sshpwd-area">
                            <label class="layui-form-label">ssh密码</label>
                            <div class="layui-input-block">
                                <input type="text" name="spass" autocomplete="off" placeholder="请输入远程登录密码"
                                    class="layui-input">
                            </div>
                        </div>
                        <div id="sshkey-area" style="display:none">
                            <div class="layui-form-item">
                                <label class="layui-form-label">ssh密钥</label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-primary" id="uploadkey">
                                        <i class="layui-icon">&#xe67c;</i>上传密钥
                                    </button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密钥地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="spath" id="ssh-path" autocomplete="off"
                                        placeholder="本地开发可直接填写绝对路径" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <input type="hidden" name="id" value="0">
                <button type="submit" class="layui-btn layui-btn-lg layui-btn-warm" lay-submit=""
                    lay-filter="user-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="submit" class="layui-btn layui-btn-danger layui-btn-lg" lay-submit=""
                    lay-filter="user-test">
                    <i class="layui-icon layui-icon-ok"></i>
                    测试连接
                </button>
            </div>
        </div>
    </form>

    <script src="/static/js/layui.js"></script>
    <script>
        layui.config({
            base: "/static/js/"
        }).extend({
            api: 'api'
        }).use([
            'api'
        ], function () {
            let api = layui.api;
            let form = layui.form
                , layer = layui.layer
                , $ = layui.$
                , upload = layui.upload
                , req = api.req()
                , postUrl;
            form.verify({
                len: (val, item) => {
                    let min = item.getAttribute("min")
                    if (val.length > 0 && val.length < min) {
                        return '长度不能小于' + min;
                    }
                }
            })
            //渲染
            let changeStype = (stype) => {
                if (stype == 2) {
                    $('#sshkey-area').show();
                    $('#sshpwd-area').hide();
                } else {
                    $('#sshkey-area').hide();
                    $('#sshpwd-area').show();
                }
            };
            if (req.id) {
                postUrl = 'db/confEdit';
                api.get('db/confEditBefore?id=' + req.id, res => {
                    console.log(res)
                    form.val('editform', res)
                    if (res.ssh == 1) {
                        $('#ssh-area').show();
                        changeStype(res.stype);
                    }
                })
            } else {
                postUrl = 'db/confAdd';
            }
            form.on('switch(ssh)', function (data) {
                //console.log(data)
                $('#ssh-area').toggle();
            });

            form.on('radio(sshtype)', function (data) {
                //console.log(data)
                //$('#ssh-area').toggle();
                changeStype(data.value);
            });
            //
            //执行实例
            let uploadInst = upload.render({
                elem: '#uploadkey' //绑定元素
                , url: api.apiUrl + 'upload/index' //上传接口
                , data: {
                    sys: 1
                }
                , headers: api.getHeader()
                , exts: ['pem']
                , field: 'file'
                , done: function (res) {
                    //上传完毕回调
                    console.log(res)
                    $('#ssh-path').val(res.data.filepath)
                }
                , error: function () {
                    //请求异常回调

                }
            });
            let parseData = (data) => {
                //console.log(data)
                if (data.ssh && data.ssh == 'on') {
                    data.ssh = 1;
                    //console.log(sshConfig)
                    if (data.stype == 1) {
                        if (!data.spass || data.spass.length < 2) {
                            layer.msg('请输入ssh密码');
                            return false;
                        }
                    } else {
                        if (!data.spath || data.spath.length < 2) {
                            layer.msg('请上传或输入ssh密钥');
                            return false;
                        }
                    }
                } else {
                    data.ssh = 0;
                }
                return data;
            }
            //监听提交
            form.on('submit(user-save)', function (data) {
                data = data.field;
                if (req.name && req.name != data.name) {
                    layer.msg("数据库名不允许变更");
                    return false;
                }
                let postData = parseData(data);
                //console.log(data)
                //console.log(postData)
                if (!postData) return false;
                //return false;
                api.post(postUrl, postData, res => {
                    //console.log(res)
                    //return false;
                    parent.layui.table.reload("conf-table");
                    parent.parent.layui.table.reload("db-table");
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页

                })
                return false;
            });
            form.on('submit(user-test)', function (data) {
                data = data.field;
                let postData = parseData(data);
                //console.log(postData);
                if (!postData) return false;
                api.post('db/confTest', postData, res => {
                    console.log(res)
                    layer.msg('连接成功')
                }, err => {
                    layer.msg('连接失败')
                })
                return false;
            });


        });
    </script>

</body>

</html>